const viewB = document.getElementById('bgView');
const template = document.getElementById('template');

// 动态生成 20 个子视图
for (let i = 1; i <= 20; i++) {
    // 创建一个新的 slider 元素
    const subview = document.createElement('div');
    subview.className = 'subview';
    // subview.textContent = `Subview ${i}`;

    const slider = document.createElement('input');
    slider.type = 'range';
    slider.className = 'slider';  // 添加 CSS 样式类

    // 设置滑块的属性
    slider.min = 0;
    slider.max = 100;
    slider.value = Math.floor(Math.random() * 100);  // 设置初始值为 0 到 100 之间的随机数

    // 为滑块添加事件监听器，打印当前值
    slider.addEventListener('input', function (event) {
        console.log(`Slider ${i} Value: ${event.target.value}`);
    });

    // 将滑块添加到容器中
    subview.appendChild(slider);
    viewB.appendChild(subview);

}

// import HorizontalSlider from '../commont/slider_horizontal.js';
// import VerticalSlider from '../commont/slider_vertical.js';

// // 获取容器

// // 创建垂直滑块
// new VerticalSlider(viewB, {
//     min: 0,
//     max: 100,
//     value: 30,
//     color: '#ff6347',
//     thumbColor:'#4caf50',
//     width: '40px',
//     height: '200px',
// });

// // 创建水平滑块
// new HorizontalSlider(viewB, {
//     min: 0,
//     max: 50,
//     value: 25,
//     color: '#4caf50',
//     width: '150px',
//     height: '20px',
// });